<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2019-07-30 10:21:50
 * @LastEditTime: 2023-02-06 13:04:35
 * @LastEditors: 阳婷
 -->
<template>
  <div class="login-container">
    <div class="loginBox">
      <el-form
        autoComplete="on"
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-position="left"
        label-width="0px"
        class="card-box login-form"
      >
        <el-form-item>
          <div class="container"></div>
          <img
            style="vertical-align: middle; width: 17%"
            class="f-l"
            src="../../assets/logo6.png"
          />
          <h3 class="title" style="vertical-align: middle">无人超市售卖系统</h3>
        </el-form-item>
        <el-form-item prop="username" style="margin-top: 10px">
          <span class="svg-container svg-container_login">
            <i class="fa fa-user"></i>
          </span>
          <el-input
            name="username"
            type="text"
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="用户名"
          />
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <i class="fa fa-lock"></i>
          </span>
          <el-input
            name="password"
            :type="pwdType"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
          <span class="show-pwd" @click="showPwd">
            <i class="fa" :class="pwdIcon"></i>
          </span>
        </el-form-item>
        <!-- <div class="tips">
                    <el-checkbox label="记住密码" v-model="checked"></el-checkbox>
                </div> -->
        <el-form-item>
          <el-button
            type="success"
            style="width: 100%; height: 50px; font-size: 18px"
            @click.native.prevent="handleLogin"
          >
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 10px;
        z-index: 12;
      "
    >
      <img
        style="width: 220px; display: inline-block"
        src="../../assets/lsLogo.png"
      />
      <div
        style="
          display: inline-block;
          width: 330px;
          text-align: left;
          color: #f0f0f0;
          font-size: 12px;
          margin-left: 10px;
        "
      >
        <div style="margin-bottom: 5px">
          版权所有福德机器人(成都)有限责任公司
        </div>
        <div style="margin-bottom: 5px">客服热线:0816-2578566</div>
        <div>地址:四川天府新区华阳街道祥鹤四街418号中海财富中心1107</div>
      </div>
    </div>
  </div>
</template>
<script>
import ajaxs from "@/utils/ajaxs";
import Modal from "./../../components/Modal/index.vue";
const Base64 = require("js-base64").Base64;
export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePass,
          },
        ],
      },
      pwdType: "password",
      pwdIcon: "fa-eye-slash",
      url: "",
      img: "",
      isPassing: false,
      show: false,
    };
  },
  components: {
    Modal,
  },
  mounted() {},
  methods: {
    getInfo(data) {
      this.$store.dispatch("GetInfo", data);
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
        this.pwdIcon = "fa-eye";
      } else {
        this.pwdType = "password";
        this.pwdIcon = "fa-eye-slash";
      }
    },
    handleLogin() {
      var _this = this;
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          ajaxs("post", "/api/admin/login", this.loginForm, (data) => {
            _this.$store.state.tagsView.visitedViews = [];
            sessionStorage.setItem("token_autoSale", data.data.access_token);
            localStorage.setItem("member_autosale", data.data.name);
            localStorage.setItem("memberId_autosale", data.data.id);
            this.$router.push({
              path: "/api/main",
            });
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.downloadBtn {
  color: #4094ea;
  cursor: pointer;
}

.downloadBtn:hover {
  color: #5aa6f4;
}
</style>
<style lang="scss">
@import "src/styles/mixin.scss";

.dragVeryBox {
  width: 100%;
  height: 100%;
  /* margin: 0 auto; */
  margin-bottom: 10px;
  text-align: center;

  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
}

.drags {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -175px;
  z-index: 111;
}

.closeIcon {
  position: absolute;
  right: -16px;
  top: -16px;
  z-index: 13;
  font-size: 26px;
  padding: 6px;
  color: #999;
  background-color: #fff;
  border-radius: 50px;
  cursor: pointer;
}

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  @include relative;
  height: 100%;
  background-color: $bg;
  min-width: 800px;
  min-height: 500px;
  overflow: auto;

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }

  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      -webkit-border-radius: 0;
      -o-border-radius: 0;
      -ms-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
    }
  }

  .svg-container {
    padding: 3px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 15px auto 15px auto;
    text-align: center;
    font-weight: bold;
  }

  .loginBox {
    width: 100%;
    height: calc(100% - 90px);
    overflow: auto;
    /* display: flex;
            justify-content: center;
            align-items: center; */
    z-index: 11;
    position: relative;
  }

  .login-form {
    width: 400px;
    padding: 0px 35px 0px 35px;
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -225px;
    margin-top: -154px;
  }

  .tips {
    font-size: 14px;
    margin-bottom: 10px;
    margin-left: 2px;

    span {
      color: #afafaf;
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    /* background: #fff; */
    border-radius: 5px;
    color: #454545;
    margin-bottom: 15px;
  }

  .el-form-item:first-child {
    border: none;
    background-color: rgba(0, 0, 0, 0);
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
}
</style>